<template>
	<view class="graybg">
		<view class="pads">
			<view class="box">
				
				<view class="billItem" v-for="b in list" :key="b.id">
					<!-- parentType -->
					<view>
						申请日期：
						{{ b.createTime }}
					</view>
					<view style="display: flex;justify-content: space-between;">
						<view> 发票形式 - 
							<text v-if="b.invoiceForm=='1'">电子发票</text> 
							<text v-if="b.invoiceForm=='2'">纸质普票</text> 
							<text v-if="b.invoiceForm=='3'">纸质专票</text> 
						</view>
						<view>¥ <text>{{b.total}}</text></view>
					</view>
						<view style="margin: 20rpx 0 0;display: flex;justify-content: space-between;">
							<view class="status">
								<view class="success" v-if="b.isInvoice == '1'"> 已开票</view>
								<view class="warning" v-if="b.isInvoice == '0'">未开票</view>
								<view class="success" v-if="b.isInvoice == '3'"> 已寄出</view>
								<view class="warning" v-if="b.isInvoice == '2'"> 已取消</view>
							</view>
							<view>
								<button class="billbtn" v-if="b.isInvoice == '0'" @click.stop="editDetail(b)"> 修改发票</button>
								<button class="billbtn rbtn-m-kx"
								 @click.stop="showDetail(b)">详情</button>
								
							</view>
						</view>
					
				</view>
				<view v-show="isLoadMore" @click="clickLoadMore"> 
					<uni-load-more :status="loadStatus" :content-text="contentText"></uni-load-more>
				</view>
				<view class="nodata" v-if="list.length==0">
					<image mode="aspectFit" src="@/static/nodata.png"></image>
					<text> 还没有发票</text>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script setup>
import { ref } from 'vue';
import { onShow,onPullDownRefresh,onReachBottom,onLoad} from '@dcloudio/uni-app';
import * as  hotel from '@/common/hotel.js';
import _ from 'lodash';
const app = getApp();
const list = ref([]);
const alertDialog = ref(null);
const isLoadMore = ref(false);
const showFirst = ref(true);
const loadStatus = ref('loading');
const contentText = ref({
	contentdown: '点击查看更多',
	contentrefresh: '正在加载...',
	contentnomore: '没有更多数据了'
})
const queryparam = ref({
	pageNum:1,
	pageSize: 10
})
const currUser = uni.getStorageSync('currUser');
onShow(() => {
	list.value = []
	getList()
});

onLoad((option) => {
	
});
function clickLoadMore() {
	if(loadStatus.value=='nomore'){
		return
	}
	queryparam.value.pageNum+=1
	getList()

}
function getList() {
	console.log('currUser',currUser)
	isLoadMore.value = false
	const venueId = app.globalData.venue.id
	hotel.getInvoiceByUserId(currUser.userId,venueId).then(res => {
		_.each(res.rows,(r)=>{
			list.value.push(r)
		})
		// list.value = res.rows;
		if(res.total < 10){
			isLoadMore.value = false
		}else if(res.total < (queryparam.value.pageSize*queryparam.value.pageNum)){
			isLoadMore.value = true  
			loadStatus.value='nomore'
		} else{
			isLoadMore.value = true
			loadStatus.value='more'
		}
	});
}
function showDetail(b) {
	let path = `/pages_hotel/hotel/invoiceDetail?invoiceId=${b.id}`;
	uni.navigateTo({
		url: path
	});
}
function editDetail(b) {
	hotel.getActivityDetail(b.activeId).then(res => {
		
		let path = `/pages_hotel/hotel/addInvoice?invoiceId=${b.id}&isEdit=true&kpType=${res.data.kpType}`;
		uni.navigateTo({
			url: path
		});
		
	})

}

</script>

<style lang="scss" scoped>
.fixedBtn{position: fixed;right: 30rpx;bottom: 10%;width: 100rpx;height: 100rpx;color: #fff;
	background: linear-gradient(270deg, #54e1b9, #00caa6);border-radius: 50%;
	box-shadow: 0 0 15rpx #666;font-size: 24rpx;
    text-align: center;}
	.pads{padding:0 25rpx 70rpx;}
.billItem {
	width: auto; padding-bottom: 20rpx;
	.uni-input {
		padding: 15rpx 0;
		color: #000;
	}
	.billFoot{    margin-bottom: 20rpx;}
}
.rrcard .box {
	padding: 0 0 1px;
	margin: 20rpx 0 0;
}
.graybg {
	background: #f7f8fa;
	height: 100vh;
	width: 100vw;
	overflow: auto;
}
.whitebg {
	background: #fff;
	margin-top: 15rpx;
	border-radius: 20rpx;
	margin-bottom: 180rpx;
}

.name{font-size: 34rpx;color: #000;}

.padh20 {
	padding: 0 25rpx;
}

.price{width: 100%;overflow: hidden;}
.billbtn{color: #1EC886;border: 1px solid #1EC886;    margin: initial;line-height: 2;    display: inline-block;
border-radius: 0;background-color: transparent; font-size: 28rpx;}
.rbtn-m-kx{margin: 0 0 0 10rpx;background:#1EC886;color: #fff;}
.billFoot .tip {
	font-size: 24rpx;
	font-size: 24rpx;
	color: #999;
	font-weight: 500;
	margin: 0 20rpx;
}
.billItem > view{margin-bottom: 10rpx;}
.billFoot text{white-space: nowrap;}
.billFoot text.danger{color: #da2a2a;}
.blueTag{color: #fff;background-color: #1EC886;    padding: 10rpx 10rpx;}
.status{
	.warning{color: #ff8124;}
	.danger{color: #da2a2a;}
	.gary{color: #666;}
	.success{color: #1EC886;}
}
	.popContent{background:#fff; height: auto; position: fixed; width: 80vw; max-height: 50vh;   top: 20%; left: 0; right: 0;    border-radius: 10rpx;margin: auto;z-index: 99;    box-shadow: 0 0 0 100vh rgba(0,0,0,0.4);
		.button{ width: 230rpx; margin: 20rpx auto;  font-size: 26rpx;  color: #fff;   background: linear-gradient(90deg, #00C176, #3ed89b);  padding: 6rpx 15rpx;text-align: center; border-radius: 6rpx;}
	}
	.textbody{padding: 40rpx;}
	.textbody .h3{ text-align: center;font-size: 32rpx;}
	.textbody .texts{ overflow: auto;  line-height: 1.6;    text-indent: 2em;    color: #666;    max-height: 30vh;  text-align: justify;   margin: 20rpx 0 0;  font-size: 28rpx;}
.billItem > view{box-sizing: border-box;}
.iconkp{width: 50rpx;
    height: 50rpx;
    display: block;
    margin:10rpx auto 0;}

</style>







	



